<template>
  <div ref="lo">
    <el-form inline style="margin: 20px">
      <el-form-item>
        <el-select placeholder="请选择省" @change="xiugaisheng" v-model="data.provinceCode">
          <el-option
            v-for="item in sheng"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="请选择市" v-model="data.cityCode" @change="xiugaishi">
          <el-option
            v-for="item in shi"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            
          >
        </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="请选择区" v-model="data.districtCode">
          <el-option
            v-for="item in qu"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="医院名称" v-model="data.hosname"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="医院编号" v-model="data.hoscode"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="医院类型" v-model="data.hostype">
          <el-option v-for="item in statuslist" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="医院状态" v-model="data.status">
          <el-option label="未上线" :value="0"></el-option>
          <el-option label="已上线" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button @click="clear">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table border :data="hospitallist">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="医院LOGO">
        <template slot-scope="scope">
          <img
            width="100"
            :src="'data:image/png;base64,' + scope.row.logoData"
          />
        </template>
      </el-table-column>
      <el-table-column label="医院名称" prop="hosname"></el-table-column>
      <el-table-column
        label="等级"
        prop="param.hostypeString"
      ></el-table-column>
      <el-table-column
        label="详细地址"
        prop="param.fullAddress"
      ></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status ? "已上线" : "已下线" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="操作" width="210">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="hospitalshow(scope.row.id)"
            >查看</el-button
          >
          <el-button type="success" size="mini" @click="paiban(scope.row.hoscode)">排班</el-button>
          <el-button type="success" size="mini" @click="sxx(scope.row)">{{
            scope.row.status ? "下线" : "上线"
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page.sync="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size.sync="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { Loading } from 'element-ui';
import {
  reqhospitalllist,
  reqhospitalsx,
  reqssq,
} from "../../../api/hospitallist";
export default {
  name: "Hospitallist",
  data() {
    return {
      page: 1,
      limit: 5,
      hospitallist: [],
      total: 0,
      value: "86",
      sheng: [],
      shi:[],
      qu:[],
      data:{
        hoscode:"",
        hosname:"",
        hostype:"",
        status:null,
        provinceCode:"",
        cityCode:"",
        districtCode:""
      },
      statuslist:[],
      a:"111111q"
    };
  },
  methods: {
    async gethospitalllist() {
      console.log("111")
      try {
        let loadingInstance=Loading.service({
          target:this.$refs.lo
        });
        const re = await reqhospitalllist(this.page, this.limit,this.data);
        this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
  loadingInstance.close();
});
        this.hospitallist = re.data.content;
        this.total = re.data.totalElements;
      } catch (e) {}
    },
    hospitalshow(id) {
      this.$router.push({
        name: "Hospitallistshow",
        params: {
          id,
        },
      });
    },
    async sxx(row) {
      try {
        console.log(row);
        await reqhospitalsx(row.id, row.status == 1 ? 0 : 1);
        this.gethospitalllist();
      } catch (e) {}
    },
    async getsheng() {
      try {
        const re = await reqssq(this.value);
        console.log(re.data);
        this.sheng = re.data;
      } catch (e) {}
    },
    async xiugaisheng(){
      try{
        this.shi=[]
        this.qu=[]
        this.data.cityCode=""
        this.data.districtCode=""
        const re = await reqssq(this.data.provinceCode)
        console.log(re.data)
        this.shi=re.data
      }catch(e){

      }
    },
    async xiugaishi(){
      try{
        this.qu=[]
        this.data.districtCode=""
        const re = await reqssq(this.data.cityCode)
        console.log(re.data)
        this.qu=re.data
      }catch(e){

      }
    },
    async getstatus(){
      try{
        const re = await reqssq(10000)
        console.log(re.data)
        this.statuslist=re.data
      }catch(e){

      }
    },
    async search(){
      try{
        const re = await reqhospitalllist(this.page,this.limit,this.data);
        console.log(re.data)
        this.hospitallist = re.data.content;
        this.total = re.data.totalElements;
      }catch(e){

      }
    },
    clear(){
      // data:{
      //   hoscode:"",
      //   hosname:"",
      //   hostype:"",
      //   status:null,
      //   provinceCode:"",
      //   cityCode:"",
      //   districtCode:""
      // },
      this.data.hoscode=""
      this.data.hosname=""
      this.data.hostype=""
      this.data.status=null
      this.data.provinceCode=""
      this.data.cityCode=""
      this.data.districtCode=""
      this.gethospitalllist()
    },
    paiban(id){
      this.$router.push({
        name:"Paiban",
        params:{
          id
        }
      })
    }
  },
  mounted() {
    this.gethospitalllist();
    this.getsheng();
    this.getstatus()
  },
  watch: {
    page: {
      deep: true,
      immediate: true,
      handler() {
        this.gethospitalllist();
      },
    },
    limit: {
      deep: true,
      immediate: true,
      handler() {
        this.gethospitalllist();
      },
    },
  },
};
</script>

<style lang="less" scoped></style>
